<%--
  Created by IntelliJ IDEA.
  User: Gao
  Date: 2021/8/19
  Time: 13:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    省份：
    <select id="provinceId" onchange="selectCity(this)">
        <option>---请选择--</option>
    </select>
    城市:
    <select id="cityId">
        <option>---请选择--</option>
    </select>
    区县:
    <select id="areaId">
        <option>---请选择--</option>
    </select>

    <script src="<%=request.getContextPath()%>/static/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function() {
            $.post(
                '<%=request.getContextPath()%>/area?method=selectProvince',
                function(jsonObj) {
                    console.log(jsonObj);
                    // [{id: 110000, province: "北京市"},{id: 150000, province: "内蒙古自治区"}]
                    $(jsonObj).each(function() {
                        // <option value="001">山东省</option>
                        // this
                        $('#provinceId').append('<option value="'+this.id+'">'+this.province+'</option>');
                    });
                },
                'json'
            );
        });

        function selectCity(obj) {
            console.log(obj);// <option value="001">山东省</option>
            var provinceId = $(obj).val();
            $.post(
                '<%=request.getContextPath()%>/area?method=selectCity',
                {'provinceId': provinceId},
                function(jsonObj) {
                    console.log(jsonObj);

                    $('#cityId option:gt(0)').remove();
                    $(jsonObj).each(function() {
                        // <option value="001">山东省</option>
                        // this
                        $('#cityId').append('<option value="'+this.id+'">'+this.city+'</option>');
                    });
                },
                'json'
            );
        }
    </script>
</body>
</html>
